<template>
  <view class="pages">
    <view class="card">
      <view class="item">
        <text> 提现方式 </text>
        <view class="pay-type">
          <image
            style="width: 36rpx; height: 36rpx; margin-right: 14rpx"
            src="@/static/shop/zhifubao.png"
            mode="scaleToFill"
          />
          <view style="font-weight: 400; font-size: 28rpx; color: #202020">支付宝</view>
        </view>
      </view>
      <view class="pay_amount_box">
        <view style="font-weight: 400; font-size: 26rpx; color: #202020; margin-top: 10rpx;"> 提现金额 </view>
        <view class="pay_amount">
          <view>
            <text>￥</text>
            <text>{{ amount }}</text>
          </view>
          <view class="allin_draw" @click="drawAllIn()">全部提取</view>
        </view>
        <view class="pay_info">提取到账时间为2-3个工作日，可提现金额: {{ userAmount }}元</view>
      </view>
    </view>
    <!-- 键盘 -->
    <view class="keyboard">
      <view class="keyboard_box">
        <view class="keyboard_left">
          <view class="greater_zero">
            <view class="greater_item" v-for="(item, index) in keyboardNum" :key="index" @click="keyboardOut(item)">{{ item
            }}</view>
          </view>
          <view class="zero_point">
            <view class="zero" @click="keyboardOut(0)">0</view>
            <view class="point" @click="keyboardOut('.')">.</view>
          </view>
        </view>
        <view class="keyboard_right">
          <view class="delete" @click="deleteNum()">
            <image src="@/static/imgs/jp_delete.png" mode="aspectFit" />
          </view>
          <view v-if="amount == 0" class="verify_key" style="background: #D6E2E1;">完成</view>
          <view v-else class="verify_key" @click="withdrawalAlipayFn()">完成</view>
        </view>
      </view>
      <view style="width : 750rpx;" :style="{height:bottoms + 'px'}"></view>
    </view>

    <!-- 弹窗 -->
    <u-popup :show="quShow" mode="center" @close="close" :round="10">
      <view class="qu_box">
        <view class="qu_box_t">请先绑定支付宝账号和姓名</view>
        <view class="qu_box_b">
          <view class="qu_box_b_l" @click="close">取消</view>
          <view class="qu_box_b_r" @click.stop="cancleBind">去绑定</view>
        </view>
      </view>
    </u-popup>
  </view>
  <!-- 绑定提示 -->
  <h-modal :show="bindShow" titlea="请先绑定支付宝账号和姓名" leftBtn="取消" rightBtn="确定" btnColor="#FFB300" @clear="bindShow = false"
    @bind="saveEditFn"></h-modal>
</template>

<script setup>
import { ref, nextTick } from 'vue'
import { onLoad, onShow, onReady } from '@dcloudio/uni-app'
import { showToast, redirectTo, navigateTo, navigateBack } from '@/utils'
import { useMemberStore } from '@/stores'
import { withdrawalAlipay, getBoundInfoApi } from '@/api/patients/index'
const keyboardNum = ref(['1', '2', '3', '4', '5', '6', '7', '8', '9'])
const userStore = useMemberStore()
const amount = ref(0)
let quShow = ref(false)
const bindShow = ref(false)
onLoad((options) => {

})
onShow(() =>{
  getBoundInfo()
})
const bottoms = ref(0)
onReady(() => {
  uni.getSystemInfo({
    success: (e) => {
      bottoms.value = e.safeAreaInsets.bottom
    }
  })
})
//获取钱包金额
const userAmount = ref(0)
async function getBoundInfo(){
  const res = await getBoundInfoApi()
  if(res?.code == 200){
    userAmount.value = res?.data?.money_balance
  }
}
//键盘输入
const keyboardOut = (num) => {
  if (amount.value == 0 && num == 0) {
    return
  } else {
    if (amount.value == 0 && num == '.') {
      return
      // amount.value = ''
    }
    if(amount.value == 0){
      amount.value = ''
    }
    if (num === '.') {
      if (!amount.value.includes('.')) {
        amount.value += '.'
      } else {
        return
      }
    }else{
      amount.value += num.toString()
    }
  }
}
//键盘删除
const deleteNum = () => {
  if (amount.value == 0) {
    return
  }
  amount.value = amount.value.slice(0, -1)
  if (!amount.value.length) {
    amount.value = '0'
  }
}
const saveEditFn = () =>{
  bindShow.value = false
  navigateTo('/pages-users/my-money/wallet-bind/index')
}
//全部提现
async function drawAllIn(){
  if(userAmount.value <= 0){
    showToast('可提现金额不足')
  }else{
    amount.value = userAmount.value
  }
}
//提现
async function withdrawalAlipayFn() {
  if(!amount.value.length || amount.value == 0){
    showToast('请输入提现金额')
  }else{
    let res = await withdrawalAlipay({money:amount.value})
    if(res?.status == 200){
      setTimeout(()=>{
        showToast('提现成功')
      },50)
      navigateTo(`/pages-users/my-money/wallet-bind/withdraw-ok?amount=${amount.value}`)
    }else{
      if(res?.message == '请先绑定支付宝~'){
        bindShow.value = true
      }else{
        showToast(res?.message)
      }
    }
  }

}
</script>
<style scoped lang="scss">
::v-deep .vue-ref {
  padding-bottom: 0 !important;
}

.pages {
  width: 750rpx;
  min-height: 95vh;
  padding-bottom: 30rpx;
  background-color: #f6f6f6;
  padding-top: 20rpx;

  .card {
    width: 702rpx;
    margin: 0 auto;
    :last-child {
      border: none !important;
    }

    .item {
      border-bottom: 1rpx solid #e6e6e6;
      display: flex;
      align-items: center;
      justify-content: space-between;
      width: 709rpx;
      height: 120rpx;
      background: #ffffff;
      padding: 20rpx;
      border-radius: 16rpx 16rpx 16rpx 16rpx;
      .pay-type {
        display: flex;
        align-items: center;
      }
      text {
        font-weight: 400;
        font-size: 28rpx;
        color: #202020;
      }
    }
    .pay_amount_box {
      width: 709rpx;
      height: 260rpx;
      background: #ffffff;
      border-radius: 16rpx 16rpx 16rpx 16rpx;
      padding: 20rpx 20rpx 0 20rpx;
      margin: 20rpx 0;
      .pay_amount {
        width: 662rpx;
        height: 120rpx;
        display: flex;
        align-items: center;
        justify-content: space-between;
        border-bottom: 1rpx solid #F1F1F1;
        text {
          font-weight: 500;
          font-size: 40rpx;
          color: #333333;
        }
        .allin_draw{
          font-weight: 400;
          font-size: 28rpx;
          color: #00C1B9;
        }
      }
      .pay_info {
        font-weight: 400;
        font-size: 24rpx;
        color: #AAAAAA;
        margin-top: 20rpx;
      }
    }
  }

  .send-btn {
    margin: 0 auto;
    margin-top: 60vh;
    width: 630rpx;
    height: 91rpx;
    background: #ffb300;
    border-radius: 46rpx 46rpx 46rpx 46rpx;
    opacity: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 34rpx;
    color: #f6f6f6;
  }
}
.qu_box {
  width: 576rpx;
  background: #ffffff;
  border-radius: 16rpx;
  .qu_box_t {
    font-size: 28rpx;
    font-family: PingFang SC, PingFang SC;
    font-weight: 400;
    color: #999999;
    margin-top: 64rpx;
    text-align: center;
  }
  .qu_box_b {
    margin-top: 50rpx;
    display: flex;
    justify-content: space-between;
    .qu_box_b_l {
      width: 163rpx;
      height: 58rpx;
      border-radius: 29rpx;
      border: 1rpx solid #ffb300;
      font-size: 30rpx;
      font-family: PingFang SC, PingFang SC;
      font-weight: 400;
      color: #ffb300;
      line-height: 58rpx;
      text-align: center;
      margin-left: 76rpx;
    }
    .qu_box_b_r {
      width: 163rpx;
      height: 58rpx;
      background: #ffb300;
      border-radius: 29rpx;
      font-size: 30rpx;
      font-family: PingFang SC, PingFang SC;
      font-weight: 400;
      color: #ffffff;
      line-height: 58rpx;
      text-align: center;
      margin-right: 76rpx;
    }
  }
}
.keyboard{
  position: fixed;
  left: 0;
  bottom:0;
  width: 750rpx;
  background: #F1F1F1;
}
.keyboard_box {

    width: 730rpx;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 20rpx auto;

    .keyboard_left {
      height: 390rpx;
      width: 545rpx;

      .greater_zero {
        display: flex;
        align-items: center;
        justify-content: space-between;
        flex-wrap: wrap;

        .greater_item {
          width: 175rpx;
          height: 90rpx;
          background: #FFFFFF;
          border-radius: 10rpx;
          font-weight: 500;
          font-size: 44rpx;
          color: #333333;
          text-align: center;
          line-height: 90rpx;
          margin-bottom: 10rpx;
        }
      }
      .zero_point{
        display: flex;
        align-items: center;
        justify-content: space-between;
        .point{
          width: 175rpx;
          height: 90rpx;
          background: #FFFFFF;
          border-radius: 10rpx;
          font-weight: 500;
          font-size: 44rpx;
          color: #333333;
          text-align: center;
          line-height: 90rpx;
        }
      }
      .zero {
        width: 360rpx;
        height: 90rpx;
        background: #FFFFFF;
        border-radius: 10rpx;
        font-weight: 500;
        font-size: 44rpx;
        color: #333333;
        text-align: center;
        line-height: 90rpx;
      }
    }

    .keyboard_right {
      height: 390rpx;
      display: flex;
      flex-direction: column;
      justify-content: space-between;

      .delete {
        width: 175rpx;
        height: 90rpx;
        background: #FFFFFF;
        border-radius: 10rpx;
        display: flex;
        align-items: center;
        justify-content: center;

        image {
          width: 40rpx;
          height: 32rpx;
        }
      }

      .verify_key {
        width: 175rpx;
        height: 288rpx;
        background: #00C1B9;
        border-radius: 10rpx;
        font-weight: 400;
        font-size: 36rpx;
        color: #FFFFFF;
        text-align: center;
        line-height: 288rpx;
      }
    }
  }
</style>

